<template>
  <div class="history">
    <span class="title">{{this.queryParam.problemId}}历史提交</span>
       <el-button class="back" type="primary" plain icon="el-icon-d-arrow-left" @click="list">返回</el-button> 

    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="结果id" align="center" width="85">
      </el-table-column>
      <el-table-column prop="userId" label="用户id" align="center" width="130">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" align="center" width="150">
      </el-table-column>
      <el-table-column
        prop="updatedTime"
        label="评判时间"
        align="center"
        width="160"
      >
        <template v-slot="{ row }">
          <span>{{ timeFormat(row.updatedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="compilerResult"
        label="评判结果"
        align="center"
        width="80"
      >
        <template v-slot="{ row }">
          <!-- <el-tag v-if="row.compilerResult" type="success">通过</el-tag>
        <el-tag v-else type="danger">出错</el-tag> -->
          <i
            v-if="
              row.compilerResult &&
                row.processResult.toUpperCase() === 'SUCCESS'
            "
            class="success"
            >通过</i
          >
          <i v-else class="danger">出错</i>
        </template>
      </el-table-column>
      <el-table-column
        prop="cpuTime"
        label="运行时间 (ms)"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="memory"
        label="占用内存 (mb)"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="processResult"
        label="运行结果"
        width="210"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="errorData"
        label="错误信息"
        min-width="120"
        align="center"
      >
        <template v-slot="{ row }">
          <span class="errorData" :title="row.errorData">{{
            row.errorData
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            icon="el-icon-search"
            >查看</el-button
          >
          <el-dialog
            title="查看代码"
            :visible.sync="dialogVisible"
            width="70%"
            append-to-body
          >
            <div class="code-text">
              <codeHeightLight :sourceCode="sourceCode" />
            </div>
            <span slot="footer" class="dialog-footer">
              <el-tag type="primary" @click="dialogVisible = false"
                >确 定</el-tag
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    v-show="total>10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParam.current"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="queryParam.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import codeHeightLight from "@/components/codeHighlight.vue";
import { getResults, getResult, getSourceCode } from "@/api/solutions";
import {getExperimentProblemResultByproblem} from "@/api/viewResults.js";
export default {
  name: "solutionsHistory",
  components: {
    codeHeightLight
  },
  props: {
    placeholder: {
      type: String,
      default: "请输入学生或教师姓名搜索"
    }
  },
  data() {
    return {
      userInfo: [],
      sosoPermission: false,
      sourceCode: "",
      dialogVisible: false,
      tableLoading: false, // 是否显示加载中组件
      tableData: [], //历史提交表格数据
      listquery:null,
      queryParam: {
        // 请求参数 （当前页码，页面大小）
        userId: null,
        problemId: null,
        testId: null,
        current: 1,
        limit: 10
      },
      total: 0 //  数据大小
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("user"));
    this.queryParam = this.$route.params.data;
    // 生命周期函数
    this.getTableData();
  },
  methods: {
    
    timeFormat(time) {
      // 拼接 时间格式处理
      return (
        time[0] +
        "-" +
        time[1] +
        "-" +
        time[2] +
        "  " +
        time[3] +
        ":" +
        time[4] +
        ":" +
        time[5]
      );
    },
    //  页面大小改变事件
    handleSizeChange(size) {
      this.queryParam.limit = size;
      this.getTableData();
    },
    //  当前页码改变事件
    handleCurrentChange(page) {
      this.queryParam.current = page;
      this.getTableData();
    },
    //  发送请求，获取历史提交表格，其中涉及加载组件的现与藏
    getTableData() {
      this.tableLoading = true;
      this.queryParam = this.$route.params.data;
      getExperimentProblemResultByproblem(this.queryParam).then(res => {
        console.log(res.data);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
        
        
    },
    // 监听点击代码查看事件
    handleClick(row) {
      this.dialogVisible = true;
      this.tableLoading = true;
      this.sourceCode = "";
      getSourceCode({
        resultId: row.id
      })
        .then(res => {
          this.sourceCode = res.data;
        })
        .catch(() => {
          this.$message.error("获取信息失败");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // 点击返回按钮事件
    list() {
      this.$router.go(-1);
    },
    search() {
      this.queryParam.current = 1;
      this.getTableData();
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 30px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}
.history {
  position: relative;
}
.back {
  position: absolute;
  left: 0.2rem;
}
.el-input {
  display: flex;
  width: 300px;
}
/deep/ .el-input__inner {
  border-radius: 20px;
}
.el-table {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.errorData {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: red;
}
i.success {
  font-style: normal;
  font-size: 16px;
  color: #67c23a;
}
i.danger {
  font-style: normal;
  font-size: 16px;
  color: #f56c6c;
}
.dialog-footer {
  cursor: pointer;
}
.code-text {
  white-space: pre;
  font-size: 20px;
}
</style>
